ഫ്രണ്ട്എൻഡ് മൈക്രോ-ഫ്രണ്ട്എൻഡ് റൂട്ടർ: ക്രോസ്-അപ്ലിക്കേഷൻ നാവിഗേഷൻ

ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിൽ, വലുതും സങ്കീർണ്ണവുമായ അപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗമായി മൈക്രോ-ഫ്രണ്ട്എൻഡ് ആർക്കിടെക്ചർ കാര്യമായ പ്രചാരം നേടിയിട്ടുണ്ട്. ഒരു മോണോലിത്തിക്ക് ഫ്രണ്ട്എൻഡിനെ ചെറുതും സ്വതന്ത്രവും വിന്യസിക്കാവുന്നതുമായ യൂണിറ്റുകളായി (മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ) വിഭജിക്കുന്നത് ഇതിൽ ഉൾപ്പെടുന്നു. ഈ ആർക്കിടെക്ചറിലെ പ്രധാന വെല്ലുവിളികളിലൊന്ന് ക്രോസ്-അപ്ലിക്കേഷൻ നാവിഗേഷൻ കൈകാര്യം ചെയ്യുക എന്നതാണ്, ഇത് ഉപയോക്താക്കളെ ഈ സ്വതന്ത്ര മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്കിടയിൽ സുഗമമായി നീങ്ങാൻ അനുവദിക്കുന്നു. ഈ ലേഖനം ഫ്രണ്ട്എൻഡ് മൈക്രോ-ഫ്രണ്ട്എൻഡ് റൂട്ടിംഗിനും ക്രോസ്-അപ്ലിക്കേഷൻ നാവിഗേഷനുമുള്ള ഒരു സമഗ്രമായ വഴികാട്ടി നൽകുന്നു.

എന്താണ് മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ?

മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ ഒരു ആർക്കിടെക്ചറൽ ശൈലിയാണ്, അവിടെ സ്വതന്ത്രമായി വിതരണം ചെയ്യാവുന്ന ഫ്രണ്ട്എൻഡ് ആപ്ലിക്കേഷനുകൾ ഒരൊറ്റ, ഏകീകൃത ഉപയോക്തൃ അനുഭവത്തിലേക്ക് സംയോജിപ്പിക്കപ്പെടുന്നു. ഇത് ബാക്കെൻഡിലെ മൈക്രോസർവീസുകൾക്ക് സമാനമാണ്. ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും സാധാരണയായി ഒരു പ്രത്യേക ടീമിൻ്റെ ഉടമസ്ഥതയിലായിരിക്കും, ഇത് കൂടുതൽ സ്വയംഭരണത്തിനും വേഗതയേറിയ ഡെവലപ്‌മെൻ്റ് സൈക്കിളുകൾക്കും എളുപ്പമുള്ള പരിപാലനത്തിനും അനുവദിക്കുന്നു. മൈക്രോ-ഫ്രണ്ട്എൻഡുകളുടെ പ്രയോജനങ്ങളിൽ ഇവ ഉൾപ്പെടുന്നു:

• സ്വതന്ത്രമായ വിന്യാസം: ടീമുകൾക്ക് അവരുടെ മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ ആപ്ലിക്കേഷൻ്റെ മറ്റ് ഭാഗങ്ങളെ ബാധിക്കാതെ വിന്യസിക്കാൻ കഴിയും.
• സാങ്കേതിക വൈവിധ്യം: വ്യത്യസ്ത മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ വ്യത്യസ്ത സാങ്കേതികവിദ്യകൾ ഉപയോഗിച്ച് നിർമ്മിക്കാൻ കഴിയും, ഇത് ടീമുകളെ ജോലിക്കുള്ള ഏറ്റവും മികച്ച ഉപകരണം തിരഞ്ഞെടുക്കാൻ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു ടീം റിയാക്റ്റ് ഉപയോഗിക്കുമ്പോൾ മറ്റൊരു ടീം വ്യൂ.ജെഎസ് (Vue.js) അല്ലെങ്കിൽ ആംഗുലർ (Angular) ഉപയോഗിച്ചേക്കാം.
• സ്കേലബിലിറ്റി: ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും സ്വതന്ത്രമായി സ്കെയിൽ ചെയ്യാൻ കഴിയുന്നതിനാൽ ആപ്ലിക്കേഷന് കൂടുതൽ എളുപ്പത്തിൽ സ്കെയിൽ ചെയ്യാൻ കഴിയും.
• മെച്ചപ്പെട്ട പരിപാലനം: ചെറിയ കോഡ്ബേസുകൾ മനസ്സിലാക്കാനും പരിപാലിക്കാനും എളുപ്പമാണ്.
• ടീം സ്വയംഭരണം: ടീമുകൾക്ക് അവരുടെ സ്വന്തം കോഡിലും ഡെവലപ്മെൻ്റ് പ്രക്രിയയിലും കൂടുതൽ നിയന്ത്രണമുണ്ട്.

ഒരു മൈക്രോ-ഫ്രണ്ട്എൻഡ് റൂട്ടറിൻ്റെ ആവശ്യകത

നന്നായി നിർവചിക്കപ്പെട്ട ഒരു റൂട്ടിംഗ് തന്ത്രമില്ലാതെ, മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യുമ്പോൾ ഉപയോക്താക്കൾക്ക് ഒരു വിഘടിച്ചതും നിരാശാജനകവുമായ അനുഭവം ഉണ്ടാകും. ഒരു മൈക്രോ-ഫ്രണ്ട്എൻഡ് റൂട്ടർ, മുഴുവൻ ആപ്ലിക്കേഷനിലുടനീളമുള്ള നാവിഗേഷൻ കൈകാര്യം ചെയ്യുന്നതിനായി ഒരു കേന്ദ്രീകൃത സംവിധാനം നൽകിക്കൊണ്ട് ഇത് പരിഹരിക്കുന്നു. ഇതിൽ ഇവ കൈകാര്യം ചെയ്യുന്നത് ഉൾപ്പെടുന്നു:

• യുആർഎൽ മാനേജ്മെൻ്റ്: ആപ്ലിക്കേഷനുള്ളിലെ ഉപയോക്താവിൻ്റെ നിലവിലെ സ്ഥാനം യുആർഎൽ കൃത്യമായി പ്രതിഫലിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
• സ്റ്റേറ്റ് മാനേജ്മെൻ്റ്: ആവശ്യമുള്ളപ്പോൾ മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്കിടയിൽ സ്റ്റേറ്റ് പങ്കിടുന്നു.
• ലേസി ലോഡിംഗ്: പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിന് ആവശ്യമുള്ളപ്പോൾ മാത്രം മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ ലോഡുചെയ്യുന്നു.
• ഓതൻ്റിക്കേഷനും ഓതറൈസേഷനും: വ്യത്യസ്ത മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിലുടനീളം ഉപയോക്തൃ ഓതൻ്റിക്കേഷനും ഓതറൈസേഷനും കൈകാര്യം ചെയ്യുന്നു.

ക്രോസ്-അപ്ലിക്കേഷൻ നാവിഗേഷൻ തന്ത്രങ്ങൾ

ഒരു മൈക്രോ-ഫ്രണ്ട്എൻഡ് ആർക്കിടെക്ചറിൽ ക്രോസ്-അപ്ലിക്കേഷൻ നാവിഗേഷൻ നടപ്പിലാക്കുന്നതിന് നിരവധി സമീപനങ്ങളുണ്ട്. ഓരോ സമീപനത്തിനും അതിൻ്റേതായ ഗുണങ്ങളും ദോഷങ്ങളുമുണ്ട്, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ നിർദ്ദിഷ്ട ആവശ്യകതകളെ ആശ്രയിച്ചിരിക്കും ഏറ്റവും മികച്ച തിരഞ്ഞെടുപ്പ്.

1. ഒരു കേന്ദ്രീകൃത റൂട്ടർ ഉപയോഗിക്കുന്നത് (സിംഗിൾ-സ്പാ)

മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ജനപ്രിയ ഫ്രെയിംവർക്കാണ് സിംഗിൾ-സ്പാ (Single-Spa). വ്യത്യസ്ത ആപ്ലിക്കേഷനുകൾക്കിടയിലുള്ള നാവിഗേഷൻ നിയന്ത്രിക്കുന്നതിന് ഇത് ഒരു കേന്ദ്രീകൃത റൂട്ടർ ഉപയോഗിക്കുന്നു. പ്രധാന ആപ്ലിക്കേഷൻ ഓർക്കസ്ട്രേറ്ററായി പ്രവർത്തിക്കുകയും നിലവിലെ യുആർഎൽ അടിസ്ഥാനമാക്കി മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ റെൻഡർ ചെയ്യുന്നതിനും അൺമൗണ്ട് ചെയ്യുന്നതിനും ഉത്തരവാദിയായിരിക്കുകയും ചെയ്യുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:

1. ഉപയോക്താവ് ഒരു നിർദ്ദിഷ്ട യുആർഎല്ലിലേക്ക് നാവിഗേറ്റ് ചെയ്യുന്നു.
2. സിംഗിൾ-സ്പാ റൂട്ടർ യുആർഎൽ മാറ്റം തടസ്സപ്പെടുത്തുന്നു.
3. യുആർഎൽ അടിസ്ഥാനമാക്കി, ഏത് മൈക്രോ-ഫ്രണ്ട്എൻഡ് ആണ് സജീവമാകേണ്ടതെന്ന് റൂട്ടർ നിർണ്ണയിക്കുന്നു.
4. റൂട്ടർ അനുബന്ധ മൈക്രോ-ഫ്രണ്ട്എൻഡ് സജീവമാക്കുകയും മറ്റേതെങ്കിലും സജീവമായ മൈക്രോ-ഫ്രണ്ട്എൻഡുകളെ അൺമൗണ്ട് ചെയ്യുകയും ചെയ്യുന്നു.

ഉദാഹരണം (സിംഗിൾ-സ്പാ):

നിങ്ങൾക്ക് home, products, cart എന്നിങ്ങനെ മൂന്ന് മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ ഉണ്ടെന്ന് കരുതുക. സിംഗിൾ-സ്പാ റൂട്ടർ ഇനിപ്പറയുന്ന രീതിയിൽ കോൺഫിഗർ ചെയ്യപ്പെടും:

import { registerApplication, start } from 'single-spa'; registerApplication( 'home', () => import('./home/home.app.js'), location => location.pathname === '/' ); registerApplication( 'products', () => import('./products/products.app.js'), location => location.pathname.startsWith('/products') ); registerApplication( 'cart', () => import('./cart/cart.app.js'), location => location.pathname.startsWith('/cart') ); start();

ഈ ഉദാഹരണത്തിൽ, ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും സിംഗിൾ-സ്പാ ഉപയോഗിച്ച് രജിസ്റ്റർ ചെയ്തിട്ടുണ്ട്, കൂടാതെ യുആർഎൽ അടിസ്ഥാനമാക്കി മൈക്രോ-ഫ്രണ്ട്എൻഡ് എപ്പോൾ സജീവമാകണമെന്ന് നിർണ്ണയിക്കാൻ ഒരു ഫംഗ്ഷൻ നൽകിയിരിക്കുന്നു. ഉപയോക്താവ് /products എന്നതിലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ, products മൈക്രോ-ഫ്രണ്ട്എൻഡ് സജീവമാകും.

പ്രയോജനങ്ങൾ:

• റൂട്ടിംഗിൽ കേന്ദ്രീകൃത നിയന്ത്രണം.
• ലളിതമായ സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് (സിംഗിൾ-സ്പാ ഓർക്കസ്ട്രേറ്ററിന് കൈകാര്യം ചെയ്യാൻ കഴിയും).
• നിലവിലുള്ള ആപ്ലിക്കേഷനുകളുമായി സംയോജിപ്പിക്കാൻ എളുപ്പമാണ്.

പോരായ്മകൾ:

• പരാജയത്തിനുള്ള ഒരൊറ്റ പോയിൻ്റ്. ഓർക്കസ്ട്രേറ്റർ പ്രവർത്തനരഹിതമായാൽ, മുഴുവൻ ആപ്ലിക്കേഷനെയും ഇത് ബാധിക്കും.
• കാര്യക്ഷമമായി നടപ്പിലാക്കിയില്ലെങ്കിൽ പ്രകടനത്തിൽ ഒരു തടസ്സമായി മാറിയേക്കാം.

2. മൊഡ്യൂൾ ഫെഡറേഷൻ (വെബ്പാക്ക് 5)

വെബ്പാക്ക് 5-ൻ്റെ മൊഡ്യൂൾ ഫെഡറേഷൻ (Module Federation), റൺടൈമിൽ വ്യത്യസ്ത വെബ്പാക്ക് ബിൽഡുകൾക്കിടയിൽ കോഡ് പങ്കിടാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇതിനർത്ഥം നിങ്ങൾക്ക് കമ്പോണൻ്റുകൾ, മൊഡ്യൂളുകൾ, അല്ലെങ്കിൽ മുഴുവൻ ആപ്ലിക്കേഷനുകൾ പോലും ഒരു ബിൽഡിൽ (ഹോസ്റ്റ്) നിന്ന് മറ്റൊന്നിലേക്ക് (റിമോട്ട്) എക്സ്പോസ് ചെയ്യാൻ കഴിയും. ഇത് മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു, ഇവിടെ ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും ഒരു പ്രത്യേക വെബ്പാക്ക് ബിൽഡാണ്.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:

1. ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും ഒരു പ്രത്യേക വെബ്പാക്ക് പ്രോജക്റ്റായി നിർമ്മിക്കപ്പെടുന്നു.
2. ഒരു മൈക്രോ-ഫ്രണ്ട്എൻഡ് ഹോസ്റ്റ് ആപ്ലിക്കേഷനായി നിശ്ചയിച്ചിരിക്കുന്നു.
3. റിമോട്ട് മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിൽ നിന്ന് ഏതൊക്കെ മൊഡ്യൂളുകളാണ് ഉപയോഗിക്കേണ്ടതെന്ന് ഹോസ്റ്റ് ആപ്ലിക്കേഷൻ നിർവചിക്കുന്നു.
4. ഹോസ്റ്റ് ആപ്ലിക്കേഷനിലേക്ക് ഏതൊക്കെ മൊഡ്യൂളുകളാണ് എക്സ്പോസ് ചെയ്യേണ്ടതെന്ന് റിമോട്ട് മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ നിർവചിക്കുന്നു.
5. റൺടൈമിൽ, ഹോസ്റ്റ് ആപ്ലിക്കേഷൻ ആവശ്യമനുസരിച്ച് റിമോട്ട് മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിൽ നിന്ന് എക്സ്പോസ് ചെയ്ത മൊഡ്യൂളുകൾ ലോഡ് ചെയ്യുന്നു.

ഉദാഹരണം (മൊഡ്യൂൾ ഫെഡറേഷൻ):

ഒരു host ആപ്പും ഒരു remote ആപ്പും ഉണ്ടെന്ന് കരുതുക.

host/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: ['react', 'react-dom'], }), ], };

remote/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container; module.exports = { // ... plugins: [ new ModuleFederationPlugin({ name: 'remote', exposes: { './Button': './src/Button', }, shared: ['react', 'react-dom'], }), ], };

ഈ ഉദാഹരണത്തിൽ, host ആപ്ലിക്കേഷൻ remote ആപ്ലിക്കേഷനിൽ നിന്നുള്ള Button കമ്പോണൻ്റ് ഉപയോഗിക്കുന്നു. രണ്ട് ആപ്ലിക്കേഷനുകളും react, react-dom എന്നിവയുടെ ഒരേ പതിപ്പ് ഉപയോഗിക്കുന്നുവെന്ന് shared ഓപ്ഷൻ ഉറപ്പാക്കുന്നു.

പ്രയോജനങ്ങൾ:

• വികേന്ദ്രീകൃത ആർക്കിടെക്ചർ. ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും സ്വതന്ത്രമാണ്, അവയെ വെവ്വേറെ വികസിപ്പിക്കാനും വിന്യസിക്കാനും കഴിയും.
• കോഡ് പങ്കിടൽ. റൺടൈമിൽ വ്യത്യസ്ത ആപ്ലിക്കേഷനുകൾക്കിടയിൽ കോഡ് പങ്കിടാൻ മൊഡ്യൂൾ ഫെഡറേഷൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• ലേസി ലോഡിംഗ്. ആവശ്യമുള്ളപ്പോൾ മാത്രം മൊഡ്യൂളുകൾ ലോഡ് ചെയ്യപ്പെടുന്നു, ഇത് പ്രകടനം മെച്ചപ്പെടുത്തുന്നു.

പോരായ്മകൾ:

• സിംഗിൾ-സ്പായെക്കാൾ സജ്ജീകരിക്കാനും കോൺഫിഗർ ചെയ്യാനും കൂടുതൽ സങ്കീർണ്ണമാണ്.
• പതിപ്പ് പൊരുത്തക്കേടുകൾ ഒഴിവാക്കാൻ പങ്കിട്ട ഡിപൻഡൻസികളുടെ ശ്രദ്ധാപൂർവ്വമായ മാനേജ്മെൻ്റ് ആവശ്യമാണ്.

3. വെബ് കമ്പോണൻ്റ്സ്

പുനരുപയോഗിക്കാവുന്ന കസ്റ്റം എച്ച്ടിഎംഎൽ (HTML) എലമെൻ്റുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു കൂട്ടം വെബ് സ്റ്റാൻഡേർഡുകളാണ് വെബ് കമ്പോണൻ്റ്സ് (Web Components). ഉപയോഗിക്കുന്ന ഫ്രെയിംവർക്ക് പരിഗണിക്കാതെ, ഏത് വെബ് ആപ്ലിക്കേഷനിലും ഈ കമ്പോണൻ്റുകൾ ഉപയോഗിക്കാൻ കഴിയും. ഇത് അവയെ മൈക്രോ-ഫ്രണ്ട്എൻഡ് ആർക്കിടെക്ചറുകൾക്ക് സ്വാഭാവികമായി അനുയോജ്യമാക്കുന്നു, കാരണം അവ യുഐ (UI) കമ്പോണൻ്റുകൾ നിർമ്മിക്കുന്നതിനും പങ്കിടുന്നതിനും ഒരു സാങ്കേതികവിദ്യ-അജ്ഞേയമായ മാർഗ്ഗം നൽകുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:

1. ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും അതിൻ്റെ യുഐ-യെ ഒരു കൂട്ടം വെബ് കമ്പോണൻ്റുകളായി എക്സ്പോസ് ചെയ്യുന്നു.
2. പ്രധാന ആപ്ലിക്കേഷൻ (അല്ലെങ്കിൽ മറ്റൊരു മൈക്രോ-ഫ്രണ്ട്എൻഡ്) ഈ വെബ് കമ്പോണൻ്റുകൾ ഇമ്പോർട്ടുചെയ്ത് അതിൻ്റെ എച്ച്ടിഎംഎൽ-ൽ ഉപയോഗിക്കുന്നു.
3. വെബ് കമ്പോണൻ്റുകൾ അവയുടെ സ്വന്തം റെൻഡറിംഗും ലോജിക്കും കൈകാര്യം ചെയ്യുന്നു.

ഉദാഹരണം (വെബ് കമ്പോണൻ്റ്സ്):

micro-frontend-a.js:

class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Hello from Micro-Frontend A!

`; } } customElements.define('micro-frontend-a', MyComponent);

index.html (പ്രധാന ആപ്ലിക്കേഷൻ):

Main Application

ഈ ഉദാഹരണത്തിൽ, micro-frontend-a.js ഫയൽ micro-frontend-a എന്ന പേരിൽ ഒരു വെബ് കമ്പോണൻ്റ് നിർവചിക്കുന്നു. index.html ഫയൽ ഈ ഫയൽ ഇമ്പോർട്ടുചെയ്യുകയും അതിൻ്റെ എച്ച്ടിഎംഎൽ-ൽ വെബ് കമ്പോണൻ്റ് ഉപയോഗിക്കുകയും ചെയ്യുന്നു. ബ്രൗസർ വെബ് കമ്പോണൻ്റ് റെൻഡർ ചെയ്യുകയും "Hello from Micro-Frontend A!" എന്ന് പ്രദർശിപ്പിക്കുകയും ചെയ്യും.

പ്രയോജനങ്ങൾ:

• സാങ്കേതികവിദ്യ-അജ്ഞേയം. വെബ് കമ്പോണൻ്റുകൾ ഏത് ഫ്രെയിംവർക്കിനൊപ്പവും അല്ലെങ്കിൽ ഒരു ഫ്രെയിംവർക്കും ഇല്ലാതെയും ഉപയോഗിക്കാം.
• പുനരുപയോഗക്ഷമത. വെബ് കമ്പോണൻ്റുകൾ വ്യത്യസ്ത ആപ്ലിക്കേഷനുകളിൽ എളുപ്പത്തിൽ പുനരുപയോഗിക്കാൻ കഴിയും.
• എൻക്യാപ്‌സുലേഷൻ. വെബ് കമ്പോണൻ്റുകൾ അവയുടെ സ്വന്തം ശൈലികളും ലോജിക്കും എൻക്യാപ്‌സുലേറ്റ് ചെയ്യുന്നു, ഇത് ആപ്ലിക്കേഷൻ്റെ മറ്റ് ഭാഗങ്ങളുമായുള്ള വൈരുദ്ധ്യങ്ങൾ തടയുന്നു.

പോരായ്മകൾ:

• മറ്റ് സമീപനങ്ങളേക്കാൾ നടപ്പിലാക്കാൻ കൂടുതൽ വാചാലമായിരിക്കാം.
• പഴയ ബ്രൗസറുകളെ പിന്തുണയ്ക്കുന്നതിന് പോളിഫില്ലുകൾ ആവശ്യമായി വന്നേക്കാം.

4. ഐഫ്രെയിമുകൾ (Iframes)

ഐഫ്രെയിമുകൾ (ഇൻലൈൻ ഫ്രെയിമുകൾ) മൈക്രോ-ഫ്രണ്ട്എൻഡുകളെ വേർതിരിക്കുന്നതിനുള്ള ഒരു പഴയതും എന്നാൽ ഇപ്പോഴും പ്രായോഗികവുമായ ഓപ്ഷനാണ്. ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും അതിൻ്റേതായ ഐഫ്രെയിമിനുള്ളിൽ പ്രവർത്തിക്കുന്നു, ഇത് ഉയർന്ന തലത്തിലുള്ള ഒറ്റപ്പെടൽ നൽകുന്നു. ഐഫ്രെയിമുകൾക്കിടയിലുള്ള ആശയവിനിമയം postMessage എപിഐ (API) ഉപയോഗിച്ച് നേടാനാകും.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:

1. ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡും ഒരു പ്രത്യേക വെബ് ആപ്ലിക്കേഷനായി വിന്യസിക്കപ്പെടുന്നു.
2. പ്രധാന ആപ്ലിക്കേഷൻ ഓരോ മൈക്രോ-ഫ്രണ്ട്എൻഡിനെയും ഒരു ഐഫ്രെയിമിൽ ഉൾപ്പെടുത്തുന്നു.
3. പ്രധാന ആപ്ലിക്കേഷനും മൈക്രോ-ഫ്രണ്ട്എൻഡുകളും തമ്മിലുള്ള ആശയവിനിമയം postMessage എപിഐ ഉപയോഗിച്ച് നടത്തുന്നു.

ഉദാഹരണം (ഐഫ്രെയിമുകൾ):

index.html (പ്രധാന ആപ്ലിക്കേഷൻ):

Main Application

ഈ ഉദാഹരണത്തിൽ, index.html ഫയലിൽ രണ്ട് ഐഫ്രെയിമുകൾ ഉൾപ്പെടുന്നു, ഓരോന്നും വ്യത്യസ്ത മൈക്രോ-ഫ്രണ്ട്എൻഡിലേക്ക് വിരൽ ചൂണ്ടുന്നു.

പ്രയോജനങ്ങൾ:

• ഉയർന്ന തോതിലുള്ള ഒറ്റപ്പെടൽ. മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ പരസ്പരം പൂർണ്ണമായും ഒറ്റപ്പെട്ടതാണ്, ഇത് വൈരുദ്ധ്യങ്ങൾ തടയുന്നു.
• നടപ്പിലാക്കാൻ എളുപ്പമാണ്. ഐഫ്രെയിമുകൾ ലളിതവും നന്നായി മനസ്സിലാക്കാവുന്നതുമായ ഒരു സാങ്കേതികവിദ്യയാണ്.

പോരായ്മകൾ:

• ഐഫ്രെയിമുകൾക്കിടയിൽ ആശയവിനിമയം നടത്തുന്നത് ബുദ്ധിമുട്ടായിരിക്കും.
• ഒന്നിലധികം ഐഫ്രെയിമുകളുടെ ഓവർഹെഡ് കാരണം പ്രകടന പ്രശ്നങ്ങൾ ഉണ്ടാകാം.
• തടസ്സമില്ലാത്ത സംയോജനത്തിൻ്റെ അഭാവം കാരണം മോശം ഉപയോക്തൃ അനുഭവം.

മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിലുടനീളം സ്റ്റേറ്റ് മാനേജ്മെൻ്റ്

മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിലുടനീളം സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നത് ക്രോസ്-അപ്ലിക്കേഷൻ നാവിഗേഷൻ്റെ ഒരു നിർണായക വശമാണ്. നിരവധി തന്ത്രങ്ങൾ ഉപയോഗിക്കാം:

• യുആർഎൽ-അധിഷ്ഠിത സ്റ്റേറ്റ്: യുആർഎല്ലിനുള്ളിൽ സ്റ്റേറ്റ് എൻകോഡ് ചെയ്യുന്നു. ഈ സമീപനം ആപ്ലിക്കേഷൻ സ്റ്റേറ്റിനെ യുആർഎല്ലുകൾ വഴി പങ്കുവെക്കാവുന്നതും എളുപ്പത്തിൽ ബുക്ക്മാർക്ക് ചെയ്യാവുന്നതുമാക്കുന്നു.
• കേന്ദ്രീകൃത സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് (റെഡക്സ്, വ്യൂക്സ്): മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്കിടയിൽ സ്റ്റേറ്റ് പങ്കിടുന്നതിന് ഒരു ആഗോള സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറി ഉപയോഗിക്കുന്നു. കാര്യമായ പങ്കിട്ട സ്റ്റേറ്റ് ഉള്ള സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
• കസ്റ്റം ഇവൻ്റുകൾ: മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്കിടയിൽ സ്റ്റേറ്റ് മാറ്റങ്ങൾ ആശയവിനിമയം നടത്തുന്നതിന് കസ്റ്റം ഇവൻ്റുകൾ ഉപയോഗിക്കുന്നു. ഈ സമീപനം മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്കിടയിൽ അയഞ്ഞ കപ്ലിംഗിന് അനുവദിക്കുന്നു.
• ബ്രൗസർ സ്റ്റോറേജ് (ലോക്കൽ സ്റ്റോറേജ്, സെഷൻ സ്റ്റോറേജ്): ബ്രൗസർ സ്റ്റോറേജിൽ സ്റ്റേറ്റ് സംഭരിക്കുന്നു. എല്ലാ മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിലും പങ്കിടേണ്ട ആവശ്യമില്ലാത്ത ലളിതമായ സ്റ്റേറ്റിന് ഈ സമീപനം അനുയോജ്യമാണ്. എന്നിരുന്നാലും, സെൻസിറ്റീവ് ഡാറ്റ സംഭരിക്കുമ്പോൾ സുരക്ഷാ പരിഗണനകളെക്കുറിച്ച് ശ്രദ്ധിക്കുക.

ഓതൻ്റിക്കേഷനും ഓതറൈസേഷനും

ഓതൻ്റിക്കേഷനും ഓതറൈസേഷനും ഏത് വെബ് ആപ്ലിക്കേഷൻ്റെയും നിർണായക വശങ്ങളാണ്, ഒരു മൈക്രോ-ഫ്രണ്ട്എൻഡ് ആർക്കിടെക്ചറിൽ അവ കൂടുതൽ പ്രാധാന്യമർഹിക്കുന്നു. സാധാരണ സമീപനങ്ങളിൽ ഇവ ഉൾപ്പെടുന്നു:

• കേന്ദ്രീകൃത ഓതൻ്റിക്കേഷൻ സേവനം: ഒരു സമർപ്പിത സേവനം ഉപയോക്തൃ ഓതൻ്റിക്കേഷൻ കൈകാര്യം ചെയ്യുകയും ടോക്കണുകൾ (ഉദാഹരണത്തിന്, JWT) നൽകുകയും ചെയ്യുന്നു. മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്ക് ഉപയോക്തൃ ഓതറൈസേഷൻ നിർണ്ണയിക്കാൻ ഈ ടോക്കണുകൾ സാധൂകരിക്കാൻ കഴിയും.
• പങ്കിട്ട ഓതൻ്റിക്കേഷൻ മൊഡ്യൂൾ: ഓതൻ്റിക്കേഷൻ ലോജിക് കൈകാര്യം ചെയ്യുന്നതിന് ഒരു പങ്കിട്ട മൊഡ്യൂൾ ഉത്തരവാദിയാണ്. ഈ മൊഡ്യൂൾ എല്ലാ മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്കും ഉപയോഗിക്കാൻ കഴിയും.
• എഡ്ജ് ഓതൻ്റിക്കേഷൻ: നെറ്റ്വർക്കിൻ്റെ എഡ്ജിൽ (ഉദാഹരണത്തിന്, ഒരു റിവേഴ്സ് പ്രോക്സി അല്ലെങ്കിൽ എപിഐ ഗേറ്റ്വേ ഉപയോഗിച്ച്) ഓതൻ്റിക്കേഷൻ കൈകാര്യം ചെയ്യുന്നു. ഈ സമീപനത്തിന് മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിലെ ഓതൻ്റിക്കേഷൻ ലോജിക് ലളിതമാക്കാൻ കഴിയും.

മൈക്രോ-ഫ്രണ്ട്എൻഡ് റൂട്ടിംഗിനുള്ള മികച്ച രീതികൾ

മൈക്രോ-ഫ്രണ്ട്എൻഡ് റൂട്ടിംഗ് നടപ്പിലാക്കുമ്പോൾ മനസ്സിൽ സൂക്ഷിക്കേണ്ട ചില മികച്ച രീതികൾ താഴെ പറയുന്നവയാണ്:

• അത് ലളിതമായി സൂക്ഷിക്കുക: നിങ്ങളുടെ ആവശ്യങ്ങൾ നിറവേറ്റുന്ന ഏറ്റവും ലളിതമായ റൂട്ടിംഗ് തന്ത്രം തിരഞ്ഞെടുക്കുക.
• മൈക്രോ-ഫ്രണ്ട്എൻഡുകളെ വേർപെടുത്തുക: സ്വതന്ത്രമായ വികസനവും വിന്യാസവും പ്രോത്സാഹിപ്പിക്കുന്നതിന് മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾക്കിടയിലുള്ള ആശ്രിതത്വം കുറയ്ക്കുക.
• സ്ഥിരമായ ഒരു യുആർഎൽ ഘടന ഉപയോഗിക്കുക: ഉപയോക്തൃ അനുഭവവും എസ്ഇഒ-യും മെച്ചപ്പെടുത്തുന്നതിന് എല്ലാ മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിലും സ്ഥിരമായ ഒരു യുആർഎൽ ഘടന നിലനിർത്തുക.
• ലേസി ലോഡിംഗ് നടപ്പിലാക്കുക: പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിന് ആവശ്യമുള്ളപ്പോൾ മാത്രം മൈക്രോ-ഫ്രണ്ട്എൻഡുകൾ ലോഡ് ചെയ്യുക.
• പ്രകടനം നിരീക്ഷിക്കുക: ഏതെങ്കിലും തടസ്സങ്ങൾ തിരിച്ചറിയുന്നതിനും പരിഹരിക്കുന്നതിനും നിങ്ങളുടെ മൈക്രോ-ഫ്രണ്ട്എൻഡ് ആപ്ലിക്കേഷൻ്റെ പ്രകടനം പതിവായി നിരീക്ഷിക്കുക.
• വ്യക്തമായ ആശയവിനിമയ ചാനലുകൾ സ്ഥാപിക്കുക: വികസന ശ്രമങ്ങൾ ഏകോപിപ്പിക്കുന്നതിനും ഏതെങ്കിലും സംയോജന പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നതിനും വ്യത്യസ്ത മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിൽ പ്രവർത്തിക്കുന്ന ടീമുകൾക്ക് വ്യക്തമായ ആശയവിനിമയ ചാനലുകൾ ഉണ്ടെന്ന് ഉറപ്പാക്കുക.
• ശക്തമായ പിശക് കൈകാര്യം ചെയ്യൽ നടപ്പിലാക്കുക: വ്യക്തിഗത മൈക്രോ-ഫ്രണ്ട്എൻഡുകളിലെ പരാജയങ്ങൾ ഭംഗിയായി കൈകാര്യം ചെയ്യാനും അവ മുഴുവൻ ആപ്ലിക്കേഷനെയും ബാധിക്കുന്നത് തടയാനും ശക്തമായ പിശക് കൈകാര്യം ചെയ്യൽ നടപ്പിലാക്കുക.
• ഓട്ടോമേറ്റഡ് ടെസ്റ്റിംഗ്: നിങ്ങളുടെ മൈക്രോ-ഫ്രണ്ട്എൻഡ് ആപ്ലിക്കേഷൻ്റെ ഗുണനിലവാരവും സ്ഥിരതയും ഉറപ്പാക്കുന്നതിന് യൂണിറ്റ് ടെസ്റ്റുകൾ, ഇൻ്റഗ്രേഷൻ ടെസ്റ്റുകൾ, എൻഡ്-ടു-എൻഡ് ടെസ്റ്റുകൾ എന്നിവയുൾപ്പെടെ സമഗ്രമായ ഓട്ടോമേറ്റഡ് ടെസ്റ്റിംഗ് നടപ്പിലാക്കുക.

ഉപസംഹാരം

വികസിപ്പിക്കാവുന്നതും പരിപാലിക്കാവുന്നതുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിലെ സങ്കീർണ്ണവും എന്നാൽ അത്യാവശ്യവുമായ ഒരു വശമാണ് മൈക്രോ-ഫ്രണ്ട്എൻഡ് റൂട്ടിംഗ്. ഈ ലേഖനത്തിൽ പ്രതിപാദിച്ചിട്ടുള്ള വ്യത്യസ്ത റൂട്ടിംഗ് തന്ത്രങ്ങളും മികച്ച രീതികളും ശ്രദ്ധാപൂർവ്വം പരിഗണിക്കുന്നതിലൂടെ, നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് തടസ്സമില്ലാത്തതും ഉപയോക്തൃ-സൗഹൃദവുമായ ഒരു അനുഭവം സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് കഴിയും. സിംഗിൾ-സ്പാ പോലുള്ള ഒരു കേന്ദ്രീകൃത റൂട്ടറോ, മൊഡ്യൂൾ ഫെഡറേഷനോ, വെബ് കമ്പോണൻ്റുകളോ, അല്ലെങ്കിൽ ഐഫ്രെയിമുകളോ ആകട്ടെ, ശരിയായ സമീപനം തിരഞ്ഞെടുക്കുന്നത് നിങ്ങളുടെ നിർദ്ദിഷ്ട ആവശ്യങ്ങളെയും മുൻഗണനകളെയും ആശ്രയിച്ചിരിക്കുന്നു. വേർപെടുത്തൽ, സ്ഥിരമായ യുആർഎൽ ഘടനകൾ, പ്രകടന ഒപ്റ്റിമൈസേഷൻ എന്നിവയ്ക്ക് മുൻഗണന നൽകാൻ ഓർക്കുക. നന്നായി രൂപകൽപ്പന ചെയ്ത ഒരു റൂട്ടിംഗ് തന്ത്രം നടപ്പിലാക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് മൈക്രോ-ഫ്രണ്ട്എൻഡ് ആർക്കിടെക്ചറിൻ്റെ മുഴുവൻ സാധ്യതകളും അൺലോക്കുചെയ്യാനും ആഗോള പ്രേക്ഷകർക്കായി യഥാർത്ഥത്തിൽ അസാധാരണമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനും കഴിയും.